<!--
 * @description 组件管理列表页
 * @author zhanghuan
 * @date 2022/11/8
 -->
<template>
  <el-container class="component-manage">
    <split-pane split="vertical" :min-percent="0" :default-percent="20">
      <template slot="paneL">
        <div class="left-wrap">
          <el-tree
            ref="tree"
            v-loading="treeLoading"
            :data="treeData"
            :props="defaultProps"
            :expand-on-click-node="false"
            highlight-current
            node-key="id"
            default-expand-all
            :current-node-key="currentNodeKey"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node }" class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </template>

      <template slot="paneR">
        <el-main class="page-main">
          <div class="page-main-ctn">
            <el-collapse-transition>
              <div class="course-search merge">
                <el-input
                  v-model.trim="listQuery.componentName"
                  placeholder="请输入组件名称"
                  class="search-input"
                  @keyup.enter.native="handleFilter"
                />
                <el-input
                  v-model.trim="listQuery.code"
                  placeholder="请输入组件标识"
                  class="search-input"
                  @keyup.enter.native="handleFilter"
                />
                <div class="course-search-btn">
                  <el-button
                    class="filter-item"
                    type="primary"
                    @click="handleFilter"
                  >
                    搜索
                  </el-button>
                  <el-button
                    class="filter-item"
                    type="primary"
                    @click="resetList"
                  >
                    重置
                  </el-button>
                </div>
              </div>
            </el-collapse-transition>
            <div class="btn-container">
              <div class="btn-container-title">
                <span>组件管理</span>
                <span v-if="currentNodeData.classifyName">
                  <span v-if="breadList.length > 0">,当前选择</span>
                  <span
                    v-if="breadList.length"
                    class="btn-container-title-select"
                    :title="breadList.join('>')"
                  >
                    {{ breadList.join('>') }}
                  </span>
                </span>
              </div>
              <div class="btn-container-btns">
                <el-button
                  class="filter-item"
                  style="margin-left: 10px"
                  @click="handleCreate"
                >
                  新建组件
                </el-button>
              </div>
            </div>

            <div class="table">
              <el-table
                v-loading="listLoading"
                :header-cell-style="headerCellStyle"
                :data="list"
                class="tableScope"
                style="width: 100%"
              >
                <el-table-column
                  prop="componentName"
                  label="组件名称"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="code"
                  label="组件标识"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="componentVariable"
                  label="组件变量"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="interfaceSetting"
                  label="接口设置"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="correlationCondition"
                  label="组件关联条件"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="associationAction"
                  label="组件关联后操作"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="操作"
                  fixed="right"
                  align="center"
                  width="140"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <!-- v-permission="'componentManageUpdate'" -->
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleUpdate(scope.row)"
                    >
                      编辑
                    </el-button>
                    <!-- v-permission="'componentManageDelete'" -->
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleDelete(scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="btn-pagion fix">
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                @pagination="getList"
              />
            </div>
          </div>
        </el-main>
      </template>
    </split-pane>

    <component-manage-form
      ref="formDialog"
      :visible.sync="visible"
      :treeData='treeData'
      @update="handleFilter"
    />
  </el-container>
</template>

<script>
import Pagination from '@/components/Pagination'
import splitPane from 'vue-splitpane'
import permission from '@/directive/permission/index.js'
import { getClassifyTree, getComponentList, delComponent } from '../api/index'
import ComponentManageForm from './manage.vue'

export default {
  name: 'ComponentManage',
  directives: { permission },
  components: { Pagination, splitPane, ComponentManageForm },
  data() {
    return {
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      },
      treeData: [],
      breadList: [],
      currentNodeKey: '',
      currentNodeData: {},
      listQuery: {
        page: 1,
        limit: 10,
        componentName: '',
        code: ''
      },
      listLoading: false,
      list: [],
      total: 0,
      visible: false
    }
  },
  mounted() {
    this.getTreeData()
  },
  methods: {
    /**
     * 获取组件树
     */
    async getTreeData() {
      this.treeLoading = true
      try {
        const { data } = await getClassifyTree({
          classifyType: 'FLLX_CUSTOMCCOMPONENTS'
        })
        this.treeLoading = false
        this.treeData = data.data || []
        this.$nextTick(() => {
          if (this.treeData.length) {
            
            this.currentNodeKey = this.treeData[0].id
            this.breadList = [this.treeData[0].classifyName]
            this.currentNodeData = Object.assign({}, this.treeData[0])
            this.$refs.tree.setCurrentKey(this.currentNodeKey)
            this.getList()
          }
        })
      } catch (error) {
        this.treeLoading = false
      }
    },
    /**
     * 获取当前树节点和其父级节点
     */
    getTreeNode(node) {
      if (node) {
        if (node.label !== undefined) {
          this.breadList.unshift(node.label) // 在数组头部添加元素
          this.getTreeNode(node.parent) // 递归
        }
      }
    },

    /**
     * 点击树
     */
    handleNodeClick(data, node) {
      this.currentNodeData = Object.assign({}, data)
      this.breadList = []
      this.getTreeNode(node)
      this.resetList()
    },

    /**
     * 获取列表
     */
    async getList(params) {
      this.listLoading = true
      const query = {
        classifyId: this.currentNodeData.id,
        componentName: this.listQuery.componentName,
        code: this.listQuery.code,
        page: params ? params.page : this.listQuery.page,
        pageSize: params ? params.limit : this.listQuery.limit
      }
      Object.entries(query).forEach(x => {
        if (!x[1]) {
          delete query[x[0]]
        }
      })
      try {
        const { data } = await getComponentList(query)
        this.listLoading = false
        if (data.data) {
          this.list = data.data.rows || []
          this.total = data.data.total || 0
        }
      } catch (error) {
        this.listLoading = false
      }
    },

    /**
     * 搜索
     */
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    /**
     * 重置
     */
    resetList() {
      this.listQuery.componentName = ''
      this.listQuery.code = ''
      this.listQuery.page = 1
      this.getList()
    },

    /**
     * 新建组件
     */
    handleCreate() {
      const row = {
        classifyId: this.currentNodeData.id,
        classifyName: this.currentNodeData.classifyName
      }
      this.visible = true
      this.$refs.formDialog.init(row)
    },

    /**
     * 表头样式
     */
    headerCellStyle({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '10px',
        background: 'rgba(247,247,248,1)'
      }
    },

    /**
     * 编辑
     */
    handleUpdate(row) {
      const data = {
        classifyId: this.currentNodeData.id,
        classifyName: this.currentNodeData.classifyName,
        ...row
      }
      this.visible = true
      this.$refs.formDialog.init(data)
    },

    /**
     * 删除
     */
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.listLoading = true
        try {
          const { data } = await delComponent({ id: row.id })
          this.listLoading = false
          if (data.code === '200') {
            this.resetList()
          }
        } catch (error) {
          this.listLoading = false
        }
      }).catch(() => { })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
.component-manage {
  height: calc(100vh - 60px);
  padding: 0px;
  overflow-y: hidden;

  .vue-splitter-container {
    width: 100%;
  }

  .left-wrap {
    background: #fff;
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    .search-tree-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tree-filter {
        padding: 10px 18px;
      }
    }
    .el-tree-node__content {
      margin-top: 10px;
    }
    .tag {
      font-size: 12px;
      border-radius: 4px;
      padding: 2px 4px;
      color: #fff;
      &.gh {
        color: #ff7474;
        border: 1px solid #ff7474;
      }
      &.qy {
        color: #2fbcfb;
        border: 1px solid #2fbcfb;
      }
      &.bm {
        color: #ffa11c;
        border: 1px solid #ffa11c;
      }
    }
    /deep/ .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    /deep/ .el-icon-caret-right:before {
      content: '\E7A0';
      font-size: 14px;
    }
    /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: '\E7A2';
      font-size: 14px;
    }
  }

  .page-main {
    padding: 10px;
    position: relative;
    height: 100%;
    overflow-y: auto;
    background: #fff;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .page-main-ctn {
    background-color: #ffffff;
    height: 100%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    padding: 10px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .course-search {
      background-color: #fff;
      padding: 0 10px;
      overflow: hidden;

      .search-input {
        width: 30%;
      }
      .course-search-btn {
        float: right;
        .el-button.is-round {
          padding: 10px 30px;
          margin-right: 34px;
        }
        .course-search-more {
          font-size: 14px;
          font-weight: 500;
          @include font-color($mainColor);
          cursor: pointer;
          margin-left: 10px;
        }
      }
      &.merge {
        height: 50px;
        line-height: 50px;
      }
      &.separate {
        .course-search-inner {
          padding-top: 10px;
          .search-inner-item {
            .item-label {
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              color: #a6a6a6;
              font-weight: 400;
            }
            .el-checkbox__label {
              font-weight: 400;
            }
            .el-input {
              position: relative;
              .el-input__inner {
                border: none;
                padding: 0;
              }
              &:after {
                content: '';
                height: 1px;
                background-color: #e2e3e8;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
              }
            }
          }
        }
        .course-search-btn {
          text-align: center;
          display: block;
          float: none;
          height: 56px;
          line-height: 56px;
        }
      }
    }
    .btn-container {
      display: flex;
      height: 36px;
      line-height: 36px;
      margin-top: 15px;
      margin-bottom: 15px;
      .btn-container-title {
        flex: 1;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .btn-container-title-select {
          @include font-color($mainColor);
        }
      }
    }
    .el-table {
      height: calc(100% - 40px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .dataForm {
      .el-select {
        width: 100%;
      }
    }
    .upload-model {
      text-align: center;
    }
  }
}
</style>
